<template>
  <div class="app-container">
    <el-form :data="form" inline>
      <el-form-item label="账户类型：" prop="userType">
        <el-select v-model="form.userType">
          <el-option
            v-for="item in consts.ACCOUNT_TYPE"
            :label="item.title"
            :value="item.value"
            :key="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="账户名：" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item v-if="roleCheck('virtual')" class="with-pre-select" label="数据类型">
        <el-select v-model="form.isFake">
          <el-option v-for="item in consts.STATISTICS_RANGE"
                     :key="item.value"
                     :label="item.title"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-button class="filter-item" type="primary" icon="el-icon-download" @click="exportHandle">导出</el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="submitFilterForm">搜索</el-button>


    </el-form>
    <el-table
      show-summary
      :summary-method="getSummaries"
      border :data="tableData.list" v-loading="loading" element-loading-text="加载中..." class="el-table-align-center">
      <el-table-column v-for="(item,index) in gamesBalance"
                       :width="['userType','username'].includes(item.prop)?180 : ''"
                       :key="index+'gamesBalance'"
                       align="center"
                       :prop="item.prop"
                       :label="item.label">
        <template slot-scope="{row}">
          <span v-if="item.prop==='userType'">{{row[item.prop] | toConverter('ACCOUNT_TYPE')}}</span>
          <span v-else-if="item.prop==='username'">{{row[item.prop]}}</span>
          <span v-else>{{row[item.prop] | currency}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="汇总余额">
        <template slot-scope="{row}">
          {{row.agBalance+row.ptBalance+row.ebetBalance+row.xj188Balance+row.sycpBalance+row.hlqpBalance+row.gmqpBalance+row.xjLiveBalance+row.swLotteryBalance+row.ppBalance+row.fiveGMBalance+row.mwBalance+row.balance | currency}}
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
  </div>
</template>


<script>
import { getStatisticalBalanceToday, exportTodayAccountBalance } from '@/services/api/statistical';
// import { currency, currencyToNumber } from '@/filters';
import { grid, handleDownload } from '@/build';

export default {
  name: 'statistics-balance-today',
  components: {},
  props: ['today', 'rowData'],
  mixins: [grid, handleDownload],
  data() {
    return {
      tableData: {
        list: [],
        total: 0,
      },
      form: {
        username: undefined,
        userType: -1,
        isFake: 0,
      },
      filters: {
        size: 20,
        page: 1,
        isFake: 0,
      },
      statistic: [
        {
          index: 2,
          prop: 'tableData.agTotal',
          format: value => <div>{_.currency(value)}</div>,
        },
        {
          index: 3,
          prop: 'tableData.ptTotal',
          format: value => <div>{_.currency(value)}</div>,
        },
        {
          index: 4,
          prop: 'tableData.ebetTotal',
          format: value => <div>{_.currency(value)}</div>,
        },
        {
          index: 5,
          prop: 'tableData.xj188Total',
          format: value => <div>{_.currency(value)}</div>,
        },
        {
          index: 6,
          prop: 'tableData.lbTotal',
          format: value => <div>{_.currency(value)}</div>,
        },
        {
          index: 7,
          prop: 'tableData.hlTotal',
          format: value => <div>{_.currency(value)}</div>,
        },
        {
          index: 8,
          prop: 'tableData.gmqpTotal',
          format: value => <div>{_.currency(value)}</div>,
        },
        {
          index: 9,
          prop: 'tableData.xjLiveTotal',
          format: value => <div>{_.currency(value)}</div>,
        },
        {
          index: 10,
          prop: 'tableData.swLotteryTotal',
          format: value => <div>{_.currency(value)}</div>,
        },
        {
          index: 11,
          prop: 'tableData.ppTotal',
          format: value => <div>{_.currency(value)}</div>,
        },
        {
          index: 12,
          prop: 'tableData.fiveGMTotal',
          format: value => <div>{_.currency(value)}</div>,
        },
        {
          index: 13,
          prop: 'tableData.mwTotal',
          format: value => <div>{_.currency(value)}</div>,
        },
        {
          index: 14,
          prop: 'tableData.imEsportTotal',
          format: value => <div>{_.currency(value)}</div>,
        },
        // {
        //   index: 15,
        //   prop: 'tableData.virtualSportTotal',
        //   format: value => <div>{_.currency(value)}</div>,
        // },
        {
          index: 15,
          prop: 'tableData.balanceTotal',
          format: value => <div>{_.currency(value)}</div>,
        },
        {
          index: 16,
          prop: 'tableData.allTotal',
          format: value => <div>{_.currency(this.tableData.balanceTotal + this.tableData.xj188Total + this.tableData.ebetTotal + this.tableData.ptTotal + this.tableData.agTotal + this.tableData.gmqpTotal + this.tableData.xjLiveTotal + this.tableData.swLotteryTotal + this.tableData.ppTotal + this.tableData.fiveGMTotal + this.tableData.mwTotal + this.tableData.imEsportTotal)}</div>,
        },
      ],
      gamesBalance: [
        {
          prop: 'userType',
          label: '账户类型',
        },
        {
          prop: 'username',
          label: '账户名',
        },
        {
          prop: 'agBalance',
          label: 'AG平台余额',
        },
        {
          prop: 'ptBalance',
          label: 'PT平台余额',
        },
        {
          prop: 'ebetBalance',
          label: 'eBET平台余额',
        },
        {
          prop: 'xj188Balance',
          label: '贝博体育',
        },
        {
          prop: 'sycpBalance',
          label: 'LB彩票',
        },
        {
          prop: 'hlqpBalance',
          label: '欢乐棋牌',
        },
        {
          prop: 'gmqpBalance',
          label: '贝博棋牌',
        },
        {
          prop: 'xjLiveBalance',
          label: '小金真人',
        },
        {
          prop: 'swLotteryBalance',
          label: '双赢彩票',
        },
        {
          prop: 'ppBalance',
          label: 'PP电子',
        },
        {
          prop: 'fiveGMBalance',
          label: '5GM彩票',
        },
        {
          prop: 'mwBalance',
          label: 'MW捕鱼',
        },
        {
          prop: 'imEsportBalance',
          label: 'IM电竞',
        },
        // {
        //   prop: 'virtualSportBalance',
        //   label: '虚拟体育',
        // },
        {
          prop: 'balance',
          label: '中心钱包',
        },
      ],
    };
  },
  methods: {
    submitFilterForm() {
      this.filters = { ...this.filters, ...this.form };
      this.getAll();
    },
    // 导出
    exportHandle() {
      const { username, userType, isFake } = this.form;
      const ajaxData = {
        username, userType, day: this.rowData.day, isFake,
      };
      const filename = '今日余额统计明细报表.csv';
      const header = ['账户类型', '账户名', 'AG平台余额', 'PT平台余额', 'eBET真人', '贝博体育', 'LB彩票', '欢乐棋牌', '贝博棋牌', '小金真人', '双赢彩票', 'PP电子', '5GM彩票', 'MW捕鱼', 'IM电竞', '中心钱包', '汇总余额'];
      const filterField = ['userType', 'username', 'agBalance', 'ptBalance', 'ebetBalance', 'xj188Balance', 'sycpBalance', 'hlqpBalance', 'gmqpBalance', 'xjLiveBalance', 'swLotteryBalance', 'ppBalance', 'fiveGMBalance', 'mwBalance', 'imEsportBalance', 'balance', 'total'];
      exportTodayAccountBalance(ajaxData).then(([result, data]) => {
        if (result) {
          const exportData = this.responseFormatter(data.list);
          this.export2Excel(header, filterField, exportData, filename);
        } else {
          this.$message({ message: `导出失败,${data.message}`, type: 'warning' });
        }
      });
    },
    // 格式化导出数据
    responseFormatter(data) {
      const finalResult = [];
      data.forEach((item) => {
        finalResult.push({
          userType: _.toConverter(item.userType, 'ACCOUNT_TYPE'),
          username: item.username,
          agBalance: _.currency(item.agBalance),
          ptBalance: _.currency(item.ptBalance),
          ebetBalance: _.currency(item.ebetBalance),
          xj188Balance: _.currency(item.xj188Balance),
          sycpBalance: _.currency(item.sycpBalance),
          hlqpBalance: _.currency(item.hlqpBalance),
          gmqpBalance: _.currency(item.gmqpBalance),
          xjLiveBalance: _.currency(item.xjLiveBalance),
          swLotteryBalance: _.currency(item.swLotteryBalance),
          ppBalance: _.currency(item.ppBalance),
          fiveGMBalance: _.currency(item.fiveGMBalance),
          mwBalance: _.currency(item.mwBalance),
          imEsportBalance: _.currency(item.imEsportBalance),
          // virtualSportBalance: _.currency(item.virtualSportBalance),
          balance: _.currency(item.balance),
          total: _.currency(Number(item.agBalance) + Number(item.ptBalance) + Number(item.ebetBalance) + Number(item.xj188Balance) + Number(item.sycpBalance) + Number(item.hlqpBalance) + Number(item.gmqpBalance) + Number(item.xjLiveBalance) + Number(item.swLotteryBalance) + Number(item.ppBalance) + Number(item.fiveGMBalance) + Number(item.mwBalance) + Number(item.imEsportBalance) + Number(item.balance)),
        });
      });

      return finalResult;
    },
    // getSummaries(param) {
    //   const {columns, data} = param;
    //   const sums = [];
    //   columns.forEach((column, index) => {
    //     if (index === 0) {
    //       sums[index] = '汇总';
    //       return;
    //     }
    //     const values = data.map(item => Number(item[column.property]));
    //     if ([2, 3, 4, 5, 6, 7].indexOf(index) !== -1 && !values.every(value => isNaN(value))) {
    //       sums[index] = values.reduce((prev, curr) => {
    //         const value = Number(curr);
    //         if (!isNaN(value)) {
    //           return currency(currencyToNumber(prev) + parseFloat(currencyToNumber(curr)));
    //         } else {
    //           return currency(prev);
    //         }
    //       }, 0);
    //     } else {
    //       sums[index] = '';
    //     }
    //   });

    //   const total = _.reduce(sums,
    //     (m, n) => {
    //       return currencyToNumber(m) + currencyToNumber(n)
    //     })
    //   sums[7] = currency(total)
    //   return sums;
    // }
  },
  mounted() {
    if (!_.isUndefined(this.rowData)) {
      this.filters.day = moment(Number(this.rowData.day)).format('YYYY-MM-DD');
    }
    this.bindGet(getStatisticalBalanceToday, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
    });
    this.getAll();
  },

};
</script>

<style lang="scss" scoped>
</style>
